<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <div>
    <div class="nogoods" v-if="dataList.length == 0">
      <div class="cont" v-if="isNone">
        <img src="../assets/img/gift.png" alt="" style="width: 24vw;">
        <p style="color: #fff;font-size: 12px;margin-top: 1vw;letter-spacing: 1px;text-align:center;">当前暂无活动</p>
      </div>
    </div>
    <div v-else class="goodsGroup" style="width: 100vw;height: 100vh;background: #645de9;position:relative;z-index: 9999;">

      <div class="banner">
        <van-swipe :autoplay="3000">
          <van-swipe-item>
            <img src="../assets/img/goodsGroup.png" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>
      <van-tabs  swipeable height="11vw"
                type="card" v-model="value">
        <van-tab v-for="(v,index) in dataList" :key="index">
          <div slot="title" style="font-size: 16px;padding-top:
                14px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
                ">
            {{v.hour}}<br/>
            <div v-if="index == value">
              <span style="color: #fff;font-size: 12px;margin-top: -10px" v-if="v.is_start == 1">正在组团</span>
              <span style="color: #fff;font-size: 12px;margin-top: -10px" v-else>即将开始</span>
            </div>
            <div v-else>
              <span style="color: #645DE9;font-size: 12px;margin-top: -10px">{{v.day}}</span>
            </div>
          </div>
          <div class="contents">
            <div class="time">
              <p v-if="v.is_start == 1">结束倒计时：
                <span>{{timeNew.day}}</span>天
                <span>{{timeNew.hour}}</span>时
                <span>{{timeNew.min}}</span>分
                <span>{{timeNew.sec}}</span>秒
              </p>
              <p v-if="v.is_start == 0">开始倒计时：
                <span>{{timeOld.day}}</span>天
                <span>{{timeOld.hour}}</span>时
                <span>{{timeOld.min}}</span>分
                <span>{{timeOld.sec}}</span>秒
              </p>
            </div>
            <div class="goods" v-for="(g, i) in goodsList" :key="i"  @click="drop(g)">
              <div class="groupNum">
                <img src="../assets/img/person.png" alt="" class="person" style="">
                <span style="font-size: 13px;color: #fefefe;line-height: 6.67vw">{{g.number}}人团</span>
              </div>
              <div class="left">
                <img :src=g.thum_img alt="">
                <div style="width: 26.67vw;height: 26.67vw;background: rgba(0,0,0,.3)
                ;position:relative;top: -26.67vw;left: 3.7vw;" v-if="g.status == 2">
                  <img src="../assets/img/none.png" style="position:relative;top: 6.33vw;
                  width: 75%;height: 58%;" alt="">
                </div>
                <div style="width: 26.67vw;height: 26.67vw;background: rgba(0,0,0,.3)
                ;position:relative;top: -26.67vw;left: 3.7vw;" v-if="g.status == 3">
                  <img src="../assets/img/done.png" style="position:relative;top: 6.33vw;
                  width: 75%;height: 58%;" alt="">
                </div>
              </div>
              <div class="right">
                <p class="goodName">{{g.good_name}}</p>
                <p style="font-size: 14px;color: #ff0000;" class="price">￥{{g.group_price}}元
                  <span style="font-size: 11px;color: #999;text-decoration: line-through;margin-left: 2.67vw">{{g.sell_price}}元</span>
                </p>
                <div class="btn" v-if="g.status == 1">
                  <span style="background: #FF5A69;box-shadow:0 0 2.67vw #FF5A69">立即开团</span>
                </div>
                <div class="btn" v-if="g.status == 0">
                  <span style="background: #FF9FA8;box-shadow:0 0 2.67vw #FF9FA8">等待开团</span>
                </div>
                <div class="btn" v-if="g.status == 2">
                  <span style="background: #a5a5a5;box-shadow:0 0 2.67vw #a5a5a5">已抢光</span>
                </div>
                <div class="btn" v-if="g.status == 3">
                  <span style="background: #DCDCDC;box-shadow:0 0 2.67vw #DCDCDC">已结束</span>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
  </van-pull-refresh>
</template>

<script>
  import request from '../request/index'
  export default {
    name: "goodsGroup",
    components: {},
    data(){
      return{
        isNone:false,
        dataList:[],
        active2:0,
        beginTime:'',
        endTime:'',
        value:'',
        goodsList:[],
        limit_id:0,
        group_id:0,
        join_id:0,
        type:2,
        activity_id:0,
        platform:this.$route.query.version,
          timeNew: {
          day: null,
          hour: null,
          min: null,
          sec: null
        },
        timeOld:{
          day: null,
          hour: null,
          min: null,
          sec: null
        },
        isLoading: false,
      }
    },
    watch:{
      value(newVal,oldVal){
        /*that = this;*/
        this.dataList.forEach((value,index)=> {
          if (index == newVal){
            this.beginTime = value.begin_time;
            this.endTime = value.end_time;
            request.getGroupgoods(this,this.beginTime,this.endTime);
          }
        })
      }
    },
    updated(){
      this.haveBegin;
      this.notBegin;
    },
    methods:{
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
          this.isLoading = false;
        }, 500);
      },
      drop(g){
        var ua = window.navigator.userAgent.toLowerCase();
        if (this._globe.isAndroid) {
          if (window.android != null && typeof window.android != "undefined") {
              window.android.openGoods(this.type,g.goods_id,this.join_id,this.limit_id,g.group_id,this.activity_id);//
          }else if (ua.match(/micromessenger/i) == 'micromessenger'){
            wx.miniProgram.getEnv((res)=> {
              if (res.miniprogram) {
                var url= '../../pages/detail/main?type='+this.type+'&goods_id='+g.goods_id+'&join_id='+this.join_id+'&limit_id='+this.limit_id+'&group_id='+g.group_id+'&activity_id='+this.activity_id;
                wx.miniProgram.navigateTo({
                  url: url,
                })
              }
            })
          } else{
            this.$router.push({
              path:'detail',
              query:{type:this.type,goods_id:g.goods_id,join_id:this.join_id,limit_id:this.limit_id,
                group_id:g.group_id,activity_id:this.activity_id}
            })
          }
        }
        if (this._globe.isIos) {
          if (window.webkit) {
              window.webkit.messageHandlers.openGoods.postMessage
              ({type:this.type,goods_id:g.goods_id,join_id:this.join_id,limit_id:this.limit_id,group_id:g.group_id,activity_id:this.activity_id
              });
           //
            /* window.webkit.messageHandlers.callAppHelp.postMessage(num)*/
          }else if (ua.match(/micromessenger/i) == 'micromessenger'){
            wx.miniProgram.getEnv((res)=> {
              if (res.miniprogram) {
                var url= '../../pages/detail/main?type='+this.type+'&goods_id='+g.goods_id+'&join_id='+this.join_id+'&limit_id='+this.limit_id+'&group_id='+g.group_id+'&activity_id='+this.activity_id;
                wx.miniProgram.navigateTo({
                  url: url,
                })
              }
            })
          } else {
            this.$router.push({
              path:'/detail?type='+this.type+'&goods_id='+g.goods_id+'&join_id='+
                this.join_id+'&limit_id='+this.limit_id+'&group_id='+g.group_id+'&activity_id='+this.activity_id,
              // query:{type:this.type,goods_id:g.goods_id,join_id:this.join_id,limit_id:this.limit_id,group_id:g.group_id}
            })
          }
        }
      }
    },
    computed:{
      haveBegin: function () {
        var that = this;
        setInterval(function () {
          var dateEnd = new Date(that.endTime*1000);
          that.dateNow = new Date();
          var surplusTime = dateEnd.getTime() - that.dateNow.getTime();
          if (surplusTime<0) {
            that.timeNew.day = 0;
            that.timeNew.hour = 0;
            that.timeNew.min = 0;
            that.timeNew.sec = 0;
          }else{
            that.timeNew.day = Math.floor(surplusTime / 1000 / 24 / 3600);
            that.timeNew.hour = Math.floor((surplusTime - that.timeNew.day * 1000 * 24 * 3600) / 1000 / 3600);
            that.timeNew.min = Math.floor((surplusTime - that.timeNew.day * 1000 * 24 * 3600 - that.timeNew.hour * 1000 * 3600) / 1000 / 60);
            that.timeNew.sec = Math.floor((surplusTime - that.timeNew.day * 1000 * 24 * 3600 - that.timeNew.hour * 1000 * 3600 - that.timeNew.min * 1000 * 60) / 1000)

          }
        }, 200)
      },
      notBegin: function () {
        var that = this;
        setInterval(function () {
          var dateBegin = new Date(that.beginTime*1000);
          that.dateNow = new Date();
          var surplusTime = dateBegin.getTime() - that.dateNow.getTime();
          if (surplusTime<0) {
            that.timeOld.day = 0;
            that.timeOld.hour = 0;
            that.timeOld.min = 0;
            that.timeOld.sec = 0;
          }else{
            that.timeOld.day = Math.floor(surplusTime / 1000 / 24 / 3600);
            that.timeOld.hour = Math.floor((surplusTime - that.timeOld.day * 1000 * 24 * 3600) / 1000 / 3600);
            that.timeOld.min = Math.floor((surplusTime - that.timeOld.day * 1000 * 24 * 3600 - that.timeOld.hour * 1000 * 3600) / 1000 / 60);
            that.timeOld.sec = Math.floor((surplusTime - that.timeOld.day * 1000 * 24 * 3600 - that.timeOld.hour * 1000 * 3600 - that.timeOld.min * 1000 * 60) / 1000)

          }
        }, 200)
      },
    },
    created(){
      request.goodsGroup(this);
      if (this._globe.isAndroid){
        $(document).ready(function(){
          $(window).scroll(function() {
            var top = 70;
            var scrollTop = $(window).scrollTop();
            if(scrollTop < top){
              $(".top").css('opacity',scrollTop/top);
            }else{
              $(".top").css('opacity',1);
            }
          });
        });
      }
    },
    mounted(){
      window.openGoods= this.drop;
      if(window.webkit){
        window.webkit.openGoods= this.drop;
      }
    }

  }
</script>

<style scoped lang="scss">
  .nogoods{
    width: 100vw;
    height: 100vh;
    background:#645de9;
    position: relative;
    .cont{
      width: 28vw;
      height: 30vw;
      display: inline-block;
      margin: 0px auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      top: -44vw;
    }
  }
  @media screen and (min-width: 320px) and (max-width: 375px){
    .contents .time p span{
      top: .6vw;
    }
  }
  @media screen and (min-width: 360px) and (max-width: 375px){
    .contents .time p span{
      top: -.1vw !important;
    }
    /*.contents .goods .right .goodName{
      height: 13vw !important;
    }*/
  }
  @media screen and (min-width: 400px) and (max-width: 414px){
    /* .contents .goods .right .goodName{
       height: 11vw !important;
     }*/
  }
  @media screen and (min-width: 375px){
    .contents .time p span{
      top: 0vw !important;
    }
    .price{
      margin-top: .8vw;
    }
    /* .contents .goods .right .goodName{
       height: 12vw !important;
     }*/
  }
  @media screen and (min-width: 414px){
    /*.contents .goods .right .goodName{
      height: 11vw !important;
    }*/
  }
  .top{
    width: 100vw;
    height:70px;
    background: #645DE9;
    position: fixed;
    opacity: 0;
    top: 0px;
    z-index: 9999;
  }
  .banner{
    width: 100vw;
    height: 49.07vw;
    img{
      width: 100%;
    }

  }
  .contents{
    width: 100vw;
    height: auto;
    background:#645DE9;
    position: relative;
    z-index: 9999;
    margin-top: -8vw;
    padding-bottom: 4vw;
    padding-top: 13vw;
    .time{
      font-size: 13px;
      color: #fff;
      padding-top: 4vw;
      p{
        text-align: center;
        span{
          width: 5.3vw;
          height: 5.3vw;
          background-color: #fff;
          display: inline-block;
          border-radius: 1vw;
          margin-left: 3vw;
          margin-right: 2vw;
          position: relative;
          top: 1vw;
          color: #ff5a69;
        }
      }
    }
    .goods{
      width: 92vw;
      height: 38vw;
      background: #fff;
      margin: 0px auto;
      margin-top: 6.13vw;
      border-radius: 2.67vw;
      .right{
        width: 53.07vw;
        height: 32vw;
        float: right;
        margin-right: 4vw;
        .goodName{
          font-size: 14px;
          color: #333;
          font-weight: bold;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp:2;
          overflow: hidden;
          text-overflow: ellipsis;
          height: 13vw;
          line-height: 6.5vw;
          /*height: 13vw;*/
        }
        .btn{
          width:26.67vw;
          height: 8vw;
          float: right;
          span{
            width: 100%;
            height: 100%;
            border-radius: 4vw;
            display: inline-block;
            font-size: 13px;
            color: #fefefe;
            text-align: center;
            line-height: 8vw;
            margin-top: 2.67vw;
          }
        }
      }
      .left{
        float: left;
        width: 26.67vw;
        height: 26.67vw;
        img{
          width: 100%;
          height: 100%;
          margin-left: 3.7vw;
        }
      }
      .groupNum{
        width:20vw ;
        height: 6.67vw;
        background: #FDB60A;
        border-radius:1.33vw ;
        margin: 0px auto;
        position: relative;
        top: -2.3vw;
        .person{
          width:3.7vw;
          height: 2.67vw;
          display: inline-block;
          margin-left: 3vw;
        }
      }
    }
  }
</style>
<style lang="scss">
  .goodsGroup{
    .van-pull-refresh{
      overflow:auto !important;
    }
    .van-tabs__nav--card .van-tab{
      border: none;
      border-radius: 2vw;
    }
    .van-tabs__nav--card{
      border-radius: 2vw;
      margin: 0px;
      height: 14vw;
      border: none;
    }
    .van-tabs--card .van-tabs__wrap {
      height: 14vw;
    }
    .van-tabs__wrap{
      z-index: 10000 !important;
    }
    .van-tabs__nav--card .van-tab.van-tab--active{
      color: #fff !important;
    }
    @media screen and (min-width: 320px) and (max-width: 375px){
      .van-tabs--card .van-tabs__wrap {
        height: 18vw !important;
      }
    }
    .van-tabs__nav--card .van-tab{
      color: #645DE9;
    }
    @media screen and (min-width: 410px) and (max-width: 415px){
      .van-tabs__nav--card {
        height: 12vw !important;
      }
    }
  }

</style>
